<template>
	<m-layout barBg="unset" gap="0 24" :scrollTop="scrollTop" :title="rewardName" color="#ffffff" scrollColor="#30c64f">
		<m-block class="flex" gap="40 20" spa="30 0 30">
			<view class="flex-column flex-1  ai-center">
				<view class="flex-column ai-center mb-12 ">
					<text class="fs26 mt-12">总收益</text>
				</view>
				<m-price :value="total"></m-price>
			</view>
		</m-block>
		<!-- 奖励列表 -->
		<m-block class="flex-1 dataList mt-16" :isLoading="isLoading" bgColor="unset">
			<m-block class="ptb-24 flex-between plr-24 mb-16" v-for="(item,index) in listArr">
				<m-image :size="[70,70]" src="../../../../static/images/pages/reward-center/reward02.png"></m-image>
				<view class="flex-1 ml-12">
					<view class="flex-between">
						<view class="flex">
							<text class="fs28 fw-600">{{item.ctime.replace("T"," ")}}</text>
						</view>
						<text class="fs24">{{item.jsstate==0?'未结算':"已结算"}}</text>
					</view>
					<view class="flex-between mt-8">
						<text  class="fs24">{{item.content}}</text>
						<text class="fs30 fw-600 text-primary">+{{item.rewardamount}}</text>
					
					</view>
				</view>
			</m-block>
			<m-loading class="more pb-60" gap="100 0" :list='listArr' :pageIndex="pageIndex" :pageCount="pageCount"
				:loading="isLoading" title="暂无数据" />
			<!-- <m-empty :list="listArr"></m-empty> -->
		</m-block>
	</m-layout>
</template>

<script>
	import {  CreditDetail } from "@/api/Users.js"
	export default {
		name: '',
		data() {
			return {
				rewardName:'明细',
				total:0,
				creditday:'',
				scrollTop: 0,
				listArr: [], // 商品列表
				pageSize: 10,
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
			};
		},
		watch: {
			tabIdx(val) {
				console.log('val', val)
				this.init();
			}
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		onLoad({creditday,total,credittype}={}) {
			this.creditday=creditday; // 日期
			this.total=total; // 总收益
			this.credittype=credittype; // 类型  
			if(this.credittype==3){
				this.rewardName='贡献值明细';
			}
			if(this.credittype==2){
				this.rewardName='服务津贴明细';
			}
			if(this.credittype==1){
				this.rewardName='消费积分明细';
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			init() {
				this.isLoading = true;
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			// 获取分页数据数据
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return;
				}
				const { success, list, pageCount } = await CreditDetail({
					credittype:this.credittype,
					creditday:this.creditday.toString(),
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	};
</script>

<style lang="scss">
	page {
		background: url('../../../../static/images/pages/reward-center/bg.png') no-repeat;
		background-size: 100% 200rpx;
		background-color: #F6F6F6;
	}

	.head {
		// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%) !important;
		padding: 0rpx 30rpx 10rpx;

		.ul {
			overflow-x: auto;

			.li {
				min-width: 60rpx;
				margin-right: 16rpx;

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666;
				}
			}

			.active {
				background: linear-gradient(0deg, #6cdf84 0%, rgba(251, 251, 251, 0.6) 40%);

				text {
					display: inline-block;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
</style>